<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta name="Content-Type" content="text/html;charset=utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
    <style type="text/css">
        * {margin:0; padding:0; font-family: "microsoft yahei" sans-serif; font-size: 14px;}
        .canvas {width:800px;height:600px;overflow: auto;border:1px solid #ccc}
        canvas {background-color: #000;/* opacity: .6;width: 1440px;height: 720px*/}
        .control-panel {position: fixed; background-color: #fff; right: 5px; top:5px; padding: 10px;}
        .button {display: block; padding: 10px; cursor: pointer; border:1px solid #ccc;margin-bottom:15px;}
        .button:hover {background-color: #ffa500;}
    </style>
</head>
<body>
<div class="control-panel">
    <a class="button" id="reset">Reset Camera</a>
    <input type="checkbox" id="a"> <label for="a">自动旋转</label><br/><br/>
    <input type="checkbox" id="x" checked='checked'> <label for="x">绕X轴旋转</label><br/>
    <input type="checkbox" id="y"> <label for="y">绕Y轴旋转</label><br/>
    <input type="checkbox" id="z"> <label for="z">绕Z轴旋转</label>
</div>
<canvas id="ctx" width="1440" height="720"></canvas>
<script type="text/javascript" charset="utf-8" src="../../lib/Simple3D.js"></script>
</body>
</html>